<template>
  <div>
    <el-table :data="showData"
              height="310px">
      <el-table-column type="index"
                       align="center"
                       width="50"
                       label="序号" />
      <el-table-column align="center"
                       v-for="column in requestColumns"
                       :key="column"
                       :property="column"
                       :label="column" />
    </el-table>
    <el-pagination class="common-pagination"
                   v-model:currentPage="pagination.page"
                   :page-size="pagination.size"
                   layout="prev, pager, next, jumper"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
import { getETLTableData } from '../../../../../service/data_etl'
import { useStore } from 'vuex'
import { etlArrayToTree } from '../../../../../utils/tree'

export default defineComponent({
  name: 'node-data',
  props: {
    node: Object,
    requestModal: {
      type: Boolean,
    },
    data_etl_id: {
      type: Number,
    },
  },
  setup(props, ctx) {
    const store = useStore()
    const flowData = computed(() => store.state.flowEtl.flowData)
    const nodeList = computed(() => flowData.value.nodeList)
    const lineList = computed(() => flowData.value.lineList)
    const requestColumns = ref([])
    const requestData = ref([])
    const nodeDataDialog = ref(true)
    const total = ref(0)
    const showData = ref([])
    const handleSizeChange = (size) => {
      pagination.value.page = 1
      pagination.value.size = size
      showData.value = requestData.value.slice(
        (pagination.value.page - 1) * pagination.value.size,
        pagination.value.page * pagination.value.size
      )
    }
    const handleCurrentChange = (page) => {
      pagination.value.page = page
      showData.value = requestData.value.slice(
        (pagination.value.page - 1) * pagination.value.size,
        pagination.value.page * pagination.value.size
      )
    }
    const pagination = ref({
      page: 1,
      size: 10,
    })
    // 查看数据
    const handleShowData = () => {
      getETLTableData({
        data_etl_id: props.data_etl_id,
        table: props.node.config.table,
        fields: props.node.config.fields,
      }).then((res) => {
        requestData.value = res.data
        total.value = res.data.length
        showData.value = requestData.value.slice(
          (pagination.value.page - 1) * pagination.value.size,
          pagination.value.page * pagination.value.size
        )
      })
    }
    const handleEtlNodeData = () => {
      let node = JSON.parse(JSON.stringify(props.node))
      let nodeTree = etlArrayToTree(
        lineList.value,
        props.node.id,
        'from',
        'to',
        nodeList.value
      )
      node.children = nodeTree
      console.log(node)
    }
    watch(
      () => props.node,
      (nv) => {
        console.log('Watch')
        if (!nv.id) return
        requestData.value = []
        total.value = 0
        showData.value = []
        requestColumns.value = nv.config.fields.map((item) => {
          return item.alias
        })
        if (nv.type === 'input') {
          handleShowData()
        } else {
          handleEtlNodeData()
        }
      }
    )
    onMounted(() => {
      if (!props.node.id) return
      nextTick(() => {
        requestData.value = []
        total.value = 0
        showData.value = []
        requestColumns.value = props.node.config.fields.map((item) => {
          return item.alias
        })
        if (props.node.type === 'input') {
          handleShowData()
        } else {
          handleEtlNodeData()
        }
      })
    })
    return {
      total,
      requestColumns,
      requestData,
      showData,
      nodeDataDialog,
      flowData,
      nodeList,
      lineList,
      handleShowData,
      handleSizeChange,
      handleCurrentChange,
      handleEtlNodeData,
      pagination,
    }
  },
})
</script>

<style scoped>
.field-table {
  padding: 0 12px 24px;
}
</style>